<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>图书流行榜</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        .title {
            color: #3366ff; /* 设置标题颜色为蓝色 */
            text-align: center; /* 设置标题文本居中对齐 */
            font-family: "Arial", sans-serif; /* 设置标题字体为Arial */
            font-size: 24px; /* 设置标题字体大小为24像素 */
            font-weight: bold; /* 设置标题字体为粗体 */
            margin-bottom: 0; /* 移除标题的底部外边距 */
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 class="title">流行榜</h1>
    <el-table
            :data="ebooks"
            style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="图书图片"  style="width: 50%">
                            <span><img style="width: 200px; height: 180px;" :src="props.row.bookIco"></span>
                    </el-form-item>
                    <el-form-item label="图书描述" style="width: 50%">
                        <span>{{ props.row.ebookDescribe }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
                label="图书名称"
                prop="ebookName">
        </el-table-column>
        <el-table-column
                label="图书作者"
                prop="ebookAuthor">
        </el-table-column>
        <el-table-column
                label="访问量"
                prop="browsefrequency">
        </el-table-column>
    </el-table>
    </template>
</div>
</body>
<script>
    let app=new Vue({
        el: '#app',
        data:{
            ebooks: [],
            //电子图书信息
        },
        created(){
            this.getEbooks()
        },
        methods:{
            //初始化电子图书表格数据
            getEbooks(){
                axios.get("/ebook/getEbook").then(result=>{
                    console.log(result.data.data)
                 this.ebooks=result.data.data;
                })
            }
        }
    })

</script>
</html>
